<template>
    <div class="dialog">
        <el-dialog title="信息" :visible.sync="dialogVisible" width="30%" @close="handleClose">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="roleName" label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.roleName" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="roleCode" label="角色编码" :label-width="formLabelWidth">
                    <el-input v-model="form.roleCode" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="remark" label="角色描述" :label-width="formLabelWidth">
                    <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">取 消</el-button>
                <el-button type="info" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'AddDialog',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        return {
            dialogVisible: false,
            form: {
                roleName: '',
                roleCode: '',
                remark: ''
            },
            remark: '',
            formLabelWidth: '90px',
            rules: {
                roleName: [{ required: true, message: '请输入角色名称，不能为空！', trigger: 'blur' }],
                roleCode: [{ required: true, message: '请输入角色编码，不能为空！', trigger: 'blur' }]
            }
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo']),
        hasId() {
            return 'id' in this.form
        }
    },
    watch: {

    },
    mounted() {
        this.$bus.$on('add', this.dialogShow)
        this.$bus.$on('getForm', this.getForm)
    },
    methods: {
        handleClose() {
            this.form = {}
            this.remark = ''
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj
                    // let remark = this.form.remark
                    if (this.hasId) {
                        obj = {
                            id: this.form.id,
                            roleName: this.form.roleName,
                            roleCode: this.form.roleCode,
                            remark: this.remark
                        }
                        this.$emit('editRole', obj)
                        this.$message({
                            type: 'success',
                            message: '角色信息修改成功！'
                        })

                    } else {
                        obj = {
                            roleName: this.form.roleName,
                            roleCode: this.form.roleCode,
                            remark: this.remark
                        }
                        this.$emit('addRole', obj)
                        this.$message({
                            type: 'success',
                            message: '角色新增成功！'
                        })
                    }


                    this.dialogVisible = false
                } else {
                    return false;
                }
            });
            this.form = {}
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },
        dialogShow(value) {
            this.dialogVisible = value
        },
        getForm(editRow) {
            this.form = editRow
            this.remark = editRow.remark
            console.log('editRow', editRow);
        }
    }
};
</script>
<style lang='less' scoped>
.dialog {
    background-color: aqua;

    .el-form {
        padding: 10px 40px !important;

    }

    .el-input__inner:focus {
        border-color: #11A983 !important;
        /* 使用!important确保覆盖 */
    }
}
</style>